<template>
  <div style="overflow:hidden;width: 100%;height:250px;font-size:14px;line-height:24px;">
      <vue-seamless-scroll :data="deviceLogList" :class-option="defaultOption" v-if="deviceLogList.length>0">
          <div style="display:flex;margin-bottom:10px;border-bottom:2px dashed #23cdd8;color:#cec8c8;" v-for="(item, i) in deviceLogList" :key="i">
              <span style="width:50px;color:#23cdd8;font-size:16px;line-height:48px;font-weight:bolder;">{{ i + 1 }}</span>
              <div style="display:flex;flex-wrap:wrap;margin-top: 10px;margin-left: 4%;">
                  <div style="width:150px">
                      <span>设备编号：</span>
                      <span style="color:#23cdd8;font-size: 15px;">{{ item.deviceCode }}</span>
                  </div>
                  <div style="width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                      <span>上报时间：</span>
                      <span style="color:#ffff;">{{ item.createTime }}</span>
                  </div>
                  <div style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                    <span>房间号：</span>
                      <span style="color:#ffff;">{{item.room.roomPlace}}-{{ item.room.roomNum }}</span>
                  </div>
                  <div style="width:100px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">
                      <span></span>
                      <span style="color:#f60808;font-size: 15px;">故障</span>
                  </div>
                  <div style="width:60px;align-items: flex-end;text-align: right;">
                      <span style="color:#ffdb5c"></span>
                  </div>
              </div>
          </div>
      </vue-seamless-scroll>
      <div style="width: 100%;text-align: center;font-size: 18px;margin-top: 20px;" v-else>暂无数据</div>
  </div>
  
  </template>
  
  <script>
  import vueSeamlessScroll from "vue-seamless-scroll";
  import {
    failureAlarm
  } from "@/api/iot/device";
  export default {
      components: {
          vueSeamlessScroll,
      },
      data() {
          return {
              deviceLogList: [],
              pageflag: true,
              defaultOption: {
                  step: 2,
                  limitMoveNum: 4,
                  hoverStop: true,
                  singleHeight: 280,
                  openWatch: true,
                  waitTime: 3000,
              },
              queryParams: {
                  pageNum: 1,
                  pageSize: 5,
              },
          };
      },
      created() {
          this.failureAlarm();
      },
      beforeDestroy() {
          this.clearData()
      },
      methods: {
        failureAlarm() {
            failureAlarm().then(response => {
                this.deviceLogList = response.data;
                // 轮询
                this.switper()
              });
          },
          clearData() {
              if (this.timer) {
                  clearInterval(this.timer)
                  this.timer = null
              }
          },
          //轮询
          switper() {
              if (this.timer) {
                  return
              }
              let looper = (a) => {
                  this.failureAlarm()
              };
              this.timer = setInterval(looper, 1000);
          },
      },
  };
  </script>
  